<!-- Dom模板 -->
<template>
  <div class="data">
    <!-- Dom内容 -->
    <div class="data_content">
      <h3>菜品类别</h3>
      <div class="data_box">
        <!-- <img src="https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto" alt=""> -->
        <div class="fu">
          <div>
            <el-select v-model="value" filterable placeholder="全部门店">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.aa"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input
              v-model="input"
              placeholder="菜品名称"
              style="width: 150px; display: inline-block; margin-left: 20px"
            ></el-input>
            <el-button round style="display: inline-block; margin-left: 20px"
              >查询</el-button
            >
          </div>
          <div>
            <el-button type="primary" round>导出</el-button>
          </div>
        </div>
        <div class="details">
          <div v-for="(item, index) in list" :key="index">
            <img :src="item.img" alt="" />
            <p>{{ item.title }}</p>
          </div>
        </div>
        <div class="paging">
          <Paging :list="data" :ye="1" :tiao="15" @paging="paging"></Paging>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import Paging from "../../components/paging.vue";
export default {
  name: "",
  components: { Paging },
  data() {
    return {
      msg: "测试",
      options: [
        {
          value: "选项1",
          aa: "黄金糕",
        },
        {
          value: "选项2",
          aa: "双皮奶",
        },
        {
          value: "选项3",
          aa: "蚵仔煎",
        },
        {
          value: "选项4",
          aa: "龙须面",
        },
        {
          value: "选项5",
          aa: "北京烤鸭",
        },
      ],
      data: [
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤1",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤2",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤3",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤4",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤5",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤6",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤7",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤8",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤9",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤10",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤11",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤12",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤13",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤14",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤15",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤16",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤17",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤18",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤1",
        },
        {
          img: "https://img2.baidu.com/it/u=1526341140,3087929075&fm=26&fmt=auto",
          title: "美味烧烤2",
        },
      ],
      list: [],
      value: "",
      input: "",
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.list = this.data.slice(0, 15);
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    paging(arr) {
      this.list = arr;
    },
  },
};
</script>

<style scoped lang="less">
/* @import url(''); 引入css类 */
.data {
  position: relative;
  top: -20px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1234;
  background: #ddd;
}
.data_content {
  padding: 0 20px;

  h3 {
    padding: 20px 0;
  }
  .data_box {
    background: white;
    width: 100%;
    // height: 550px;
    padding: 20px;
    box-sizing: border-box;
    width: 1366px;
    height: 806px;
    .fu {
      display: flex;
      justify-content: space-between;
    }
    .details {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      div {
        width: 18%;
        margin-right: 20px;
        text-align: center;
        margin-top: 20px;
        p {
          margin-top: 5px;
        }
      }
      img {
        width: 100%;
        height: 150px;
      }
    }
  }
}
.paging {
  position: absolute;
  right: 30px;
  bottom: 60px;
}
</style>